Week1 課程

課程重點

• 資料處理方法-ForEach
• 模板字串組合技巧-Template Literal
• 重點設計模式-關注點分離：資料先拆出來

學習關注點分離前的技術掌握

• 迴圈技巧
• ES6 樣板字面值

前後端運作模式

資料處理方法 - forEach

forEach 是這幾個陣列函式最單純的一個，不會額外回傳值，只單純執行每個陣列內的物件或值。

• forEach 向陣列裡的抓取值與索引數，開始依序取出執行。

範例

// 新增陣列
var people = [
    {
      name: '村長',
      like: '鐵人三項',
      age: 30
    },
    {
      name: '暴龍',
      like: '跑步',
      age: 18
    },
    {
      name: '偷尼',
      like: '游泳',
      age: 19
    },
    {
      name: '蓋瑞',
      like: '自行車',
      age: 16
    }
];

people.forEach(function (person, i){
    console.log(person, i);
})
// 輸出結果 :
// {name: "村長", like: "鐵人三項", age: 30} 0
// {name: "暴龍", like: "跑步", age: 18} 1
// {name: "偷尼", like: "游泳", age: 19} 2
// {name: "蓋瑞", like: "自行車", age: 16} 3

• 參數命名時，可以有動詞與名詞，複數跟單數的分別，如有一群人的陣列名稱，使用 people ， 針對個人抓值的參數就可以用 person。
• people.forEach(function (person, i) 的 person 指向陣列每個物件， i 是陣列裡物件的索引值。

1.將 "偷尼" 物件單筆列出

var data = {}  // 建立空物件
people.forEach(function (person, i){    
    if (person.name === '偷尼') {
        console.log(person);
        data = person;
    }
});
console.log('data', data);
// 輸出結果 : 
// {name: "偷尼", like: "游泳", age: 19}
// data {name: "偷尼", like: "游泳", age: 19}

2.新增一個陣列，將年齡低於20-的抓出

var data = {}  // 建立空物件
people.forEach(function (person, i){    
    if (person.age < 20) {
        data.push(person);
    }
});
console.log(data);
// 輸出結果 
// {name: "暴龍", like: "跑步", age: 18} 1
// {name: "偷尼", like: "游泳", age: 19} 2
// {name: "蓋瑞", like: "自行車", age: 16} 3

3.為所有的陣列中新增一個字串，内容為 "${name} 熱愛 ${like} 運動"

var string = '';
people.forEach(function (person, i){
    string = string + `${ person.name }熱愛${person.like}運動`
});
console.log(string);
// 輸出結果 
// 村長熱愛鐵人三項運動
// 暴龍熱愛跑步運動
// 偷尼熱愛游泳運動
// 蓋瑞熱愛自行車運動

• string = string + `` 因為抓取來的資料會一一覆蓋回去，所以讓 string = string 再加入一次前面抓到值，這樣就不會覆蓋，一一列出。
• string += string + `` 也可以用 + = 累加上去。